<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <style>
        #video1 {
            width: 640px;
            height: 480px;
            margin-right: 5px;
            margin-bottom: 5px;
            float: left;
            box-sizing: border-box;
            object-fit: fill;
            background-color: black;
            z-index: -9999;
        }

        #video2 {
            width: 640px;
            height: 480px;
            float: left;
            object-fit: fill;
            background-color: black;
        }

        #video3 {
            width: 640px;
            height: 480px;
            margin-right: 5px;
            margin-bottom: 5px;
            object-fit: fill;
            background-color: black;
            float: left;
            clear: left;
        }

        #video4 {
            width: 640px;
            height: 480px;
            float: left;
            object-fit: fill;
            background-color: black;
        }

        ul, li {
            margin: 0;
            padding: 0;
        }

        #myMenu {
            list-style: none;
            width: 150px;
            background-color: #ffffff;
            position: absolute;
            display: none;
        }

        #myMenu li {
            border-bottom: 1px solid #ccc;
            padding: 5px 10px;
            cursor: pointer;
        }

        #myMenu li:hover {
            background-color: #00ff00;
        }
    </style>
</head>
<body>


<div class="wfsjs1">
    <!-- <video muted="true" autoplay="true" id="video1" -->
    <!-- onmouseleave="mouseleave(this)" ; onclick="clickVideo(0)"></video> -->
    <video muted="true" autoplay="true" id="video1" onmousemove="mouseover(this)" onmouseleave="mouseleave(this)" onclick="clickVideo(1)"></video>
</div>
<div class="wfsjs2">
    <video muted="true" autoplay="true" id="video2" onmousemove="mouseover(this)" onmouseleave="mouseleave(this)" onclick="clickVideo(2)"></video>
</div>
<div class="wfsjs3">
    <video muted="true" autoplay="true" id="video3" onmousemove="mouseover(this)" onmouseleave="mouseleave(this)" onclick="clickVideo(3)"></video>
</div>
<div class="wfsjs4">
    <video muted="true" autoplay="true" id="video4" onmousemove="mouseover(this)" onmouseleave="mouseleave(this)" onclick="clickVideo(4)"></video>
</div>

<ul id="myMenu">
    <li>Play Video</li>
    <li>Stop Video</li>
    <li>Ptz Start</li>
    <li>Ptz Stop</li>
</ul>

<table>
    <tr>
        <td></td>
        <td>
            <button onmousedown="onmousePtzControl(1,0)" onmouseup="onmousePtzControl(1,1)">上</button>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <button onmousedown="onmousePtzControl(3,0)" onmouseup="onmousePtzControl(3,1)">左</button>
        </td>
        <td></td>
        <td>
            <button onmousedown="onmousePtzControl(4,0)" onmouseup="onmousePtzControl(4,1)">右</button>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <button onmousedown="onmousePtzControl(2,0)" onmouseup="onmousePtzControl(2,1)">下</button>
        </td>
        <td></td>
    </tr>
</table>
<script type="module" src="c2sdk_web.js"></script>
<script>
    function mouseover(o) {
        o.style.border = '2px solid red';
    }

    function mouseleave(o) {
        o.style.border = 'none';
    }
</script>

<script type="module">
    import {startPreview, createConn, stopPreview, ptzControl} from './c2sdk_web.js';

    var conn = null;
    var prev = new Array();

    function connStateCb(event) {

    }

    function alarmcb(data) {

    }

    function previewDemo() {
        var video1 = document.getElementById("video1");
        var video2 = document.getElementById("video2");
        var video3 = document.getElementById("video3");
        var video4 = document.getElementById("video4");
        var previewPara1 = {
            devip: "10.8.3.223",
            port: 8000,
            chn: 32,
            type: 0,   //大小码流
            hwnd: video1
        }

        prev[0] = startPreview(conn, previewPara1);

        var previewPara2 = {
            devip: "10.8.3.223",
            port: 8000,
            chn: 33,
            type: 0,   //大小码流
            hwnd: video2
        }
        prev[1] = startPreview(conn, previewPara2);

        var previewPara3 = {
            devip: "10.8.3.223",
            port: 8000,
            chn: 34,
            type: 0,   //大小码流
            hwnd: video3
        }
        prev[2] = startPreview(conn, previewPara3);

        var previewPara4 = {
            devip: "10.8.3.223",
            port: 8000,
            chn: 35,
            type: 0,   //大小码流
            hwnd: video4
        }
        prev[3] = startPreview(conn, previewPara4);
    }

    var videoIndex = 0;

    // 视频窗口点击事件
    function _clickVideo(index) {
        videoIndex = index;
        console.log('_clickVideo', videoIndex)
    }

    window.clickVideo = _clickVideo;

    // stop 1开始 0暂停
    function _onmousePtzControl(cmd, stop) {
        console.log(stop == 1 ? '按下' : '抬起')
        if (videoIndex == 0) {
            console.error('无点击视频', videoIndex)
            return
        }
        console.log('_onmousePtzControl', prev)
        var ptzParam = {
            devip: prev[videoIndex - 1].previewPara.devip,
            devport: prev[videoIndex - 1].previewPara.port,
            chn: prev[videoIndex - 1].previewPara.chn,
            cmd: cmd,
            stop: stop,
            speed: 5,
            preset: 1,
        }
        console.log('_onmousePtzControl', ptzParam)
        ptzControl(conn, ptzParam);
    }

    window.onmousePtzControl = _onmousePtzControl;

    window.onload = function () {
        var loginParam = {
            ip: "10.8.3.56",
            port: 8803,
            user: "admin",
            password: "96e79218965eb72c92a549dd5a330112",
            state: connStateCb,
            alarmcallback: alarmcb
        }

        conn = createConn(loginParam, null);

        setTimeout(previewDemo, 1000);
        // previewDemo();
    }

    var cmd = 0;

    var myMenu = document.getElementById("myMenu");
    document.addEventListener("contextmenu", function (event) {
        event.preventDefault();
        myMenu.style.display = "block";
        myMenu.style.top = event.clientY + "px";
        myMenu.style.left = event.clientX + "px";
    });

    document.addEventListener("click", function (event) {
        myMenu.style.display = "none";
        var index = 0;
        var bfound = 0;
        var videotag;
        for (index = 1; index <= 4; ++index) {
            videotag = "video" + index;
            var div = document.getElementById(videotag);
            var x = event.clientX;
            var y = event.clientY;
            var divx1 = div.offsetLeft;
            var divy1 = div.offsetTop;
            var divx2 = div.offsetLeft + div.offsetWidth;
            var divy2 = div.offsetTop + div.offsetHeight;
            if (x >= divx1 && x <= divx2 && y >= divy1 && y <= divy2) {
                bfound = 1;
                break;
            }
        }

        if (!bfound) {
            return;
        }

        var tag = event.target || event.srcElement;

        var chnNo = 33;
        if (index == 1) {
            chnNo = 35;
        } else if (index == 2) {
            chnNo = 33;
        } else if (index == 3) {
            chnNo = 34;
        } else {
            chnNo = 35;
        }

        if (tag.innerText == "Play Video") {
            if (null != prev[index - 1]) {
                return;
            }
            var video = document.getElementById(videotag);
            var previewPara1 = {
                devip: "10.8.3.223",
                port: 8000,
                chn: chnNo,
                type: 1,   //大小码流
                hwnd: video
            }

            prev[index - 1] = startPreview(conn, previewPara1);
        } else if (tag.innerText == "Stop Video") {
            if (null == prev[index - 1]) {
                return;
            }

            stopPreview(prev[index - 1]);
            prev[index - 1] = null;
        } else if (tag.innerText == "Ptz Start") {

            if (null == prev[index - 1]) {
                return;
            }

            cmd = cmd + 1;
            if (cmd > 4) {
                cmd = 18;
            }

            var ptzParam = {
                devip: prev[index - 1].previewPara.devip,
                devport: prev[index - 1].previewPara.port,
                chn: prev[index - 1].previewPara.chn,
                cmd: cmd,
                stop: 0,
                speed: 5,
                preset: 1,
            }

            ptzControl(conn, ptzParam);

            if (cmd == 18) {
                cmd = 0;
            }
        } else if (tag.innerText == "Ptz Stop") {
            if (null == prev[index - 1]) {
                return;
            }

            var ptzParam = {
                devip: prev[index - 1].previewPara.devip,
                devport: prev[index - 1].previewPara.port,
                chn: prev[index - 1].previewPara.chn,
                cmd: cmd,
                stop: 1,
                speed: 5,
                preset: 1,
            }

            ptzControl(conn, ptzParam);
        }
    });
</script>

</body>
</html>
